<template>
	<view v-if="visible" class="my">
		<view class="my-head">
			<!-- height: 280rpx; -->
			<u-status-bar></u-status-bar>
			<!-- #ifdef H5 -->
			<view v-if="token" class="relative custom-pc" style="width: calc(100% - 80rpx); margin: 0 auto; padding-top: 88rpx;">
				<view style="position: absolute; right: 32rpx; z-index: 9; top: 40rpx;">
					<image style="height: 212rpx; width: 212rpx;" src="@/assets/images/tx.png" mode="aspectFill"></image>
					<view style="color: #683604; font-size: 22px; font-weight: bold; text-align: center;">
						{{userInfo.nickname}}
					</view>
				</view>
				<image class="custom-bg" style="width: 100%; height: 282rpx; margin: 0 auto;" src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/14.png"></image>
				<image class="custom-bg-info" style="height: 57rpx; margin: 0 auto;" mode="heightFix" src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/60.png"></image>
				<view class="pc-custom-bg"></view>
				<view class="text-xs" style="position: absolute; width: 100%; left: 18rpx; top: 230rpx; color: #B28F5A; padding: 0 0 50rpx 40rpx;">
					有效期至 {{userInfo.expires}} <text v-if="userInfo.is_expires" style="color: #222222;">（已过期）</text>
					<view v-if="userInfo.is_expires" style="text-decoration: underline; padding: 20rpx 0;" @click="renew">立即续期</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view v-if="token" class="relative custom-pc Media Media--center Media--justifyCenter" style="width: calc(100% - 80rpx); margin: 0 auto; padding: 88rpx 40rpx 0;">
				<view class="Media-body">
					<view style="color: #0DA25F; font-size: 16px; font-weight: bold;">{{userInfo.nickname}},欢迎您使用猎豹数据分析!</view>
				</view>
			</view>
			<!-- #endif -->
			<view v-if="!token" class="relative custom-pc Media Media--center Media--justifyCenter" style="width: calc(100% - 80rpx); margin: 0 auto; padding: 88rpx 40rpx 0;">
				<view class="Media-body">
					<view style="color: #222222; font-size: 16px; font-weight: bold; text-decoration: underline;" @click="getSkip(`/pages/login/login`)">立即登录</view>
				</view>
				<u-avatar icon="account-fill" fontSize="32"></u-avatar>
			</view>
		</view>
		<view class="my_content">
			<u-cell-group v-if="visible" :border="false" :customStyle="{'background-color': '#ffffff', 'border-radius': '10rpx', marginBottom: '20rpx'}">
				<u-cell v-if="token && !userInfo.is_expires" title="历史数据" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false" @click="getSkip(`/pages/history/history`)">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/history.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
			</u-cell-group>
			<u-cell-group v-if="visible" :border="false"
				:customStyle="{'background-color': '#ffffff', 'border-radius': '10rpx'}">
				<u-cell v-if="token" title="通知设置" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false" @click="getSkip(`/pages/setting/setting`)">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/26.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<!-- #ifdef APP-PLUS -->
				<u-cell title="用户协议" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false"
					@click="getSkip(`/pages/agreement/agreement?opt=${JSON.stringify({type: 'USER_AGREEMENT_FB'})}`)">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/23.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="隐私政策" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false"
					@click="getSkip(`/pages/agreement/agreement?opt=${JSON.stringify({type: 'PRIVACY_POLICY_FB'})}`)">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/22.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="第三方SDK信息" isLink
					:titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}" :border="false"
					@click="getSkip(`/pages/agreement/agreement?opt=${JSON.stringify({type: 'SDK_AGREEMENT_FB'})}`)">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/31.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="意见反馈" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false" @click="getSkip(`/pages/user/suggestion/suggestion`)">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/32.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="清理缓存" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false" @click="reset">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/25.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="检查更新" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false" @click="handleCheckUpdate">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/21.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell v-if="token" title="注销账号" isLink :titleStyle="{'font-size': '32rpx', color: '#222222', padding: '10rpx 0'}"
					:border="false" @click="closeAccount">
					<view slot="icon">
						<image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/24.png"
							style="width: 48rpx; height: 48rpx; vertical-align: middle;" />
					</view>
				</u-cell>
				<!-- #endif -->
			</u-cell-group>
		</view>
		<!-- #ifdef APP-PLUS -->
		<u-button v-if="token" class="custom-style" :hairline="false" @click="loginOut">退出登录</u-button>
		<u-divider style="width: 100%;" text="All rights reserved. v1.0.6"></u-divider>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view style="position: absolute; width: 100%; left: 0; bottom: 200rpx;">
			<u-button v-if="token" class="custom-style" :hairline="false" @click="loginOut">退出登录</u-button>
			<u-divider style="width: 100%;" text="All rights reserved. v1.0.6"></u-divider>
		</view>
		<!-- #endif -->
		<!-- 注销功能弹出框 -->
		<u-modal :show="isShowModal" title="告知" :content='content' @confirm="isShowModal = false"></u-modal>
		<u-modal :show="isRenew" title="告知" content='续期申请已提交,请耐心等待~' @confirm="isRenew = false"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'

	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				content: '账户注销已申请，等待客服审核后即可完成账号注销',
				isShowModal: false,
				isRenew: false
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				token: state => state.login.token
			}),
		},
		mounted() {

		},
		methods: {
			handleCheckUpdate() {
				checkUpdate()
				console.log("检查版本")
				uni.showToast({
					title: '版本检查中...',
					icon: 'none',
					duration: 2000
				});
			},
			reset() {
				uni.showModal({
					content: '是否清除本地缓存?',
					success: async (res) => {
						if (res.confirm) {
							// #ifdef H5

							// #endif
							// #ifdef APP-PLUS
							try {
								// await this.$store.dispatch('login/loginOut');
								// 后期不清除token和userinfo
								uni.showToast({
									title: '缓存清除成功!',
									icon: 'none'
								})
							} catch (error) {}
							// #endif
						} else if (res.cancel) {}
					}
				});
			},
			// 跳转页面
			getSkip(url) {
				uni.navigateTo({
					url: `${url}`
				})
			},
			// 弹出注销完成框
			async closeAccount() {
				try {
					this.$showModal('是否确认账号注销操作?', () => {
						this.isShowModal = true
					})
				} catch (e) {}
			},
			// 退出登录
			loginOut() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录?',
					confirmColor: '#0DA25F',
					success:(res) => {
						if(res.confirm) this.$store.dispatch('login/loginOut')
					}
				})
			},
			async renew() {
				try {
					this.$showModal('是否向管理员申请续期?', () => {
						this.isRenew = true
					})
				} catch (e) {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		background: #FBFBFB;
		position: relative;
		height: 120vh;
		padding-bottom: 100rpx;

		.my-head {
			background: linear-gradient(180deg, #0DA25F 0%, #FBFBFB 100%);
			// height: 352rpx;
		}

		.my_content {
			padding: 40rpx;
		}

		.custom-style {
			border: none;
			border-radius: 10rpx;
			width: calc(100% - 80rpx);
			height: 100rpx;
			line-height: 100rpx;
			color: #999999;
		}
	}
	@media screen and (max-width: 750px) {
		.pc-custom-bg, .custom-bg-info {
			display: none;
		}
	}
	@media screen and (min-width: 750px) {
		.custom-pc {
			.custom-bg {
				display: none !important;
			}
			.pc-custom-bg {
				display: inline-block;
				background: linear-gradient( 135deg, #FFFAE2 0%, #FFE68A 100%);
				width: 100%;
				height: 282rpx;
				border-radius: 20px;
			}
			.custom-bg-info {
				position: absolute;
				left: 60rpx;
				top: 160rpx;
			}
		}
	}
</style>